import { ref, onMounted, watch } from 'vue'

// 导出操作list的所有函数
export default function useTodos() {
  // 声明初始数组
  const list = ref([])

  // 定义获取数据的方法
  const getTodos = () => {
    // 优先从本地获取,如果没有就获取空数组
    const todoLists = JSON.parse(localStorage.getItem('todoLists')) || []
    // 更新到list
    list.value = todoLists
  }

  // 以下是组件方法
  // 定义添加的方法,接收来自Header组件传递的参数
  const handleAdd = todoItem => {
    // 将成员添加到初始数组list
    list.value.unshift(todoItem)
  }
  // 定义切换选中状态的方法,接收来自TodoLI组件传递的id 和 选中状态
  const handleToggleTodo = (id, value) => {
    // 1.根据id找到对应的todo对象
    const todo = list.value.find(item => item.id === id)
    // 2.修改 isAny 的值
    todo.isAny = value
  }

  // 定义编辑todo的方法,接收来自TodoLI组件传递的id 和 输入内容
  const handleEditTodo = (id, value) => {
    // 1.根据id找对应的todo对象
    const todo = list.value.find(item => item.id === id)
    // 2.修改name的值
    todo.name = value
  }

  // 定义全选框控制每一项选中的方法,接收来自Footer组件传递的 全选框选中状态
  const handleToggleAllTodo = value => {
    // 每一项更新状态
    list.value.forEach(item => (item.isAny = value))
  }

  // 定义小选项删除的方法,接收来自TodoLI组件传递的id
  const handleDelTodo = id => {
    // 找出id对应项的索引值
    const index = list.value.findIndex(item => item.id === id)
    // console.log(index)
    // 删除对应的项
    list.value.splice(index, 1)
  }
  // 清除已完成的方法
  const handleClearFinished = () => {
    // 过滤数组,保留数组中isAny不为true的项,更新数组
    list.value = list.value.filter(item => !item.isAny)
  }
  // 清除所有的方法
  const handleClearAll = () => {
    list.value = []
  }

  // 监听list的变化
  watch(
    list,
    () => {
      // 本地保存JSON格式字符串
      localStorage.setItem('todoLists', JSON.stringify(list.value))
    },
    // 深度监听
    { deep: true }
  )
  // 在onMounted生命周期中获取数据
  onMounted(() => {
    getTodos()
  })

  // 返回以上的方法
  return {
    list,
    handleAdd,
    handleToggleTodo,
    handleEditTodo,
    handleToggleAllTodo,
    handleDelTodo,
    handleClearFinished,
    handleClearAll,
  }
}
